<template>
  <PageContainer>
    <view class="container">
      <Header title="已选列表" :is-box-shadow="false">
        <template>
          <view class="px-15 py-8 bgf disFlxAC">
            <view style="flex: 1">
              <UniSearchBar
                v-model.trim="params.keyword"
                placeholder="姓名/手机号/单位"
                cancelButton="none"
                radius="35"
                bgColor="#F5F5F5"
                @confirm="refresh"
                @clear="resetFnc"
              ></UniSearchBar>
            </view>
          </view>
          <view class="linh-40 px-15 fz-14 disFlxJS" style="background-color: #f5f5f5">
            <view>
              <text>已选 {{ dataList.length + '/' + totalNumber }} 人</text>
            </view>
          </view>
        </template>
      </Header>
      <view class="mt-8">
        <Paglist
          v-model="dataList"
          :is-init-api="false"
          :parame="params"
          @register="register"
          :scroll-top-bottom="200"
          :is-show-loadmore="dataList.length > 1"
        >
          <template v-for="item in dataList" :key="item.id">
            <UserItem :userInfo="item" :show-del="true" @on-del="handleOnDel(item.id)" />
          </template>
        </Paglist>
      </view>
      <TButtonGroup position="fixed" :styles="{ backgroundColor: '#FFF' }">
        <TButton
          class="gutter-btn"
          custom-class="borderBtn"
          text="+添加联系人"
          @click="goSelectUserList"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* publicSelectedUserList 已选列表 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import { provide, reactive, ref, unref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { getMemberList, getMemberStatistics } from '@/api/admin';
  import type { MsgUserData, SearchUserData } from '@/api/admin/types';
  import { navigateTo, onLoad } from '@/router';
  import UserItem from '../components/UserItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { onPageScroll, onShow, onUnload } from '@dcloudio/uni-app';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import type { PublicSelectUserList } from '@/router/types/modules';
  import { MemberRoleEnum } from '@/enums/memberRoleEnum';

  const selectedList = ref<PublicSelectUserList['selectedList']>([]);
  const type = ref<PublicSelectUserList['type']>('checkbox');
  let success: PublicSelectUserList['success'];

  provide('api', async (obj: SearchUserData) => {
    obj.size = params.size;
    const res = await getMemberList(obj);
    return res;
  });

  const totalNumber = ref(0);

  const params = reactive<SearchUserData>({
    current: 1,
    size: 20,
    dataSource: 'memberList',
    initRoleIds: [MemberRoleEnum.PRINCIPAL], // 单位身份
    ids: [],
    keyword: '',
  });

  const [register, { refresh }] = useConList();
  const dataList = ref<MsgUserData[]>([]);

  const resetFnc = () => {
    params.keyword = '';
    refresh();
  };

  function handleOnDel(id: string) {
    const list = selectedList.value.filter((v) => v !== id);
    handleSetList(list)
  }

  onLoad<'publicSelectedUserList'>((op) => {
    type.value = op.type;
    params.dataSource = op.dataSource;
    params.initRoleIds = op.initRoleIds;
    selectedList.value = op.selectedList;
    params.ids = op.selectedList as string[];
    success = op.success;
    getMemberStatistics({ dataSource: op.dataSource }).then((res) => {
      totalNumber.value = res.personNumber;
    });

    refresh && refresh();
  });

  function goSelectUserList() {
    navigateTo({
      name: 'publicSelectUserList',
      options: {
        type: type.value,
        dataSource: params.dataSource as PublicSelectUserList['dataSource'],
        initRoleIds: params.initRoleIds as PublicSelectUserList['initRoleIds'],
        selectedList: selectedList.value,
        success: (val) => {
          handleSetList(val)
        },
      },
    });
  }

  function handleSetList(list: PublicSelectUserList['selectedList']) {
    selectedList.value = list;
    params.ids = list as string[];
    success?.(unref(list));
    refresh();
  }

  onPageScroll(() => {});
</script>

<style lang="scss" scoped></style>
